<template>
    <div class="setting">
      <template v-if="tabType == 'data'">
        <dc-goods-select v-model="settingData.data.goodsList" :multiple="true"></dc-goods-select>
        <div class="card">
          <div class="title">商品样式</div>
          <div class="content">
            <el-form-item label="选择风格">
              <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
                <el-radio-button :label="1">
                  <sa-icon icon="sa-shop-decorate-goodsShelves-mode-1" />
                </el-radio-button>
                <el-radio-button :label="2">
                  <sa-icon icon="sa-shop-decorate-goodsShelves-mode-2" />
                </el-radio-button>
                <el-radio-button :label="3">
                  <sa-icon icon="sa-shop-decorate-goodsShelves-mode-3" />
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <template v-for="(item, field) in settingData.data.goodsFields" :key="field">
              <template v-if="fieldLabel[field]">
                <el-form-item :label="fieldLabel[field]">
                  <dc-color-picker
                    v-model="item.color"
                    v-model:show="item.show"
                    :isShow="true"
                  ></dc-color-picker>
                </el-form-item>
              </template>
            </template>
          </div>
        </div>
        <div class="card">
          <div class="title">商品角标</div>
          <div class="content">
            <el-form-item label="角标选择">
              <el-radio-group v-model="settingData.data.tagStyle.show">
                <el-radio :label="0">不显示</el-radio>
                <el-radio :label="1">显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="settingData.data.tagStyle.show" label="上传图片">
              <div class="sa-flex">
                <sa-uploader v-model="settingData.data.tagStyle.src" fileType="image"></sa-uploader>
                <div class="tip">建议尺寸：36*22</div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="card">
          <div class="title">样式</div>
          <div class="content">
            <el-form-item label="上圆角">
              <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
            </el-form-item>
            <el-form-item label="下圆角">
              <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
            </el-form-item>
            <el-form-item label="间距">
              <dc-slider v-model="settingData.data.space"></dc-slider>
            </el-form-item>
          </div>
        </div>
      </template>
    </div>
  </template>
  
  <script setup>
    import { computed } from 'vue';
    import dcColorPicker from '../../common/dc-color-picker.vue';
    import dcGoodsSelect from '../../common/dc-goods-select.vue';
    import dcSlider from '../../common/dc-slider.vue';
  
    const props = defineProps(['settingData', 'tabType']);
  
    const fieldLabel = computed(() => {
      return {
        title: '商品标题',
        price: '商品价格',
      };
    });
  </script>
  